{{template "admin/layout/header_full.html" .}}
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称<span class="x-red">*</span></label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <input type="text" name="describe" placeholder="请输入角色描述" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态<span class="x-red">*</span></label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="启用" checked>
            <input type="radio" name="status" value="0" title="禁用">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色菜单<span class="x-red">*</span></label>
        <div class="layui-input-block">
            <div id="menus"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addRole">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'tree'], function () {
        var form = layui.form;
        var tree = layui.tree;

        form.on('submit(addRole)', function (data) {
            data.field.menus = JSON.stringify(tree.getChecked('menus')).match(/"id":\d+/g).join(',').replace(/"id":/g, '');
            $.post("/admin/role/create", data.field, function (result) {
                parent.layer.msg(result.message);
                if (result.code === 0) {
                    ReloadLists()
                }
            });
            return false;
        });

        tree.render({
            id: 'menus',
            elem: '#menus',
            showCheckbox: true,
            showLine: true,
            data: [
                {{range .menus}}
                {
                    id: {{.Id}},
                    title: '{{.Name}}',
                    children: [
                        {{range .Child}}
                        {
                            id: {{.Id}},
                            title: '{{.Name}}',
                            children: [
                                {{range .Child}}
                                {
                                    id: {{.Id}},
                                    title: '{{.Name}}'
                                },
                                {{end}}
                            ]
                        },
                        {{end}}
                    ]
                },
                {{end}}
            ]
        });
    });
</script>
{{template "admin/layout/footer_full.html" .}}